<template>
	<view class="app FindPet">
		<view class="status_bar">

		</view>
		<view class="FindPet-Map">
			<map id="map" style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :scale="14"
				:markers="covers" :polyline="polyline" :translateMarker="translateMarker" v-show="mapShow">
			</map>
		</view>
		<view class="FindPet-Setting ">
			<view class="flex-center">
				<view style="width: 40px; color:#bebebe ; border: 1px solid #bebebe; " @click="show = !show">

				</view>
				<!-- <up-line length="10%" color="#bebebe"></up-line> -->
				<!-- <up-line length="10%" color="#bebebe"></up-line> -->
				<!-- <up-line length="10%" color="#bebebe"></up-line> -->
			</view>
			<view class="FindPet-Setting-current" v-show="show">
				<view class="FindPet-Setting-current-location">
					<image src="../../static/icon/positioning-active.png" mode=""></image>
					<text>Current location</text>
				</view>
				<view class="FindPet-Setting-current-station">
					Near Guangzhou South (subway station)
				</view>
			</view>
			<view class="FindPet-Setting-box">
				<view class="FindPet-Setting-box-date">
					<!-- <text>Molly</text> -->
					<view class="">
						<up-dropdown>
							<up-dropdown-item title="Molly" :options="options1"></up-dropdown-item>

						</up-dropdown>
					</view>
					<!-- <image src="../../static/icon/more.png" mode=""></image> -->
					<text style="color: rgb(96, 98, 102);">【Distance 2.1 km】</text>
				</view>
				<view class="FindPet-Setting-box-control" v-show="show">
					<image src="../../static/icon/right.png" mode="" class="FindPet-Setting-box-control-arrow"></image>
					<view class="FindPet-Setting-box-control-item " v-for="(item, index) in list"
						:class="{ 'active': activeIndex === index }" @click="activeIndex = index">
						<image :src="item.url + '.png'" mode="" v-if="activeIndex !== index"></image>
						<image :src="item.url + '2.png'" mode="" v-else></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>


	</view>

	<MymodalVue :show="popAttr.show">

		<template #content>
			<view class="flex-between-center flex-column">
				<view class="font-weight-600 mt-2">
					{{ popAttr.content.tips2 }}
				</view>
			</view>
		</template>
		<template #confirmButton>
			<up-button :text="popAttr.button.text" plain shape="circle" size="small" color="#9a9a9a"
				style="width: 250rpx;" @click="VlPFun"></up-button>
			<up-button :text="popAttr.button.text2" plain shape="circle" size="small" color="#11e2bd"
				style="width: 250rpx;" class="mt-2 " @click="trialFun"></up-button>
		</template>
	</MymodalVue>

	<MymodalVue :show="popAttr.show2">
		<template #content>
			<view class="flex-between-center flex-column">
				<image src="/static/image/success.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
				<text class="font-weight-600 mt-2">14:25pm Pet Molly has just returned </text>
				<text class="font-weight-600 mt-2">to the safe area.</text>
			</view>
		</template>


		<template #confirmButton>
			<up-button text="OK" plain shape="circle" size="small" color="#11e2bd" style="width: 150rpx;"
				@click="rangeFun"></up-button>
			<!-- <text>1111</text> -->
			<view class=" flex-center mt-2" style="color:#c9c1c5 ;">
				No more reminders today
			</view>
		</template>
	</MymodalVue>
</template>

<script>
import MymodalVue from '/components/Mymodal/Mymodal.vue'
export default {
	components: {
		MymodalVue
	},
	data() {
		return {
			popAttr: {
				show: false,
				show2: false,
				content: {
					tips: 'Function can record video once for free, if you want to record longer video, please open VlP membership.',
					tips2: 'You are not a member now please open a member oh',

				},
				button: {
					text: 'Start trial',
					text2: 'Open VlP',
					text3: 'Cancel',
					text4: 'GO and Activate'
				}
			},
			mapShow: true,
			show: true,
			list: [{
				text: 'Call out',
				url: '/static/image/findPet/laba',
			}, {
				text: 'photo album',
				url: '/static/image/findPet/camera'
			},
			{
				text: 'photo gragh',
				url: '/static/image/findPet/xiang'
			}, {
				text: 'Safety range',
				url: '/static/image/findPet/wei'
			},
				// {
				// 	text: 'Safety range',
				// 	url: '/static/image/findPet/wei'
				// },
				// {
				// 	text: 'Safety range',
				// 	url: '/static/image/findPet/wei'
				// },

			],
			activeIndex: 0,
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909, // 地图中心点 纬度
			longitude: 116.39742,// 地图中心点 经度
			covers: [{
				latitude: 39.909, // 宠物1 纬度
				longitude: 116.39742,// 宠物1 经度
				iconPath: '/static/image/dog.png',// 宠物头像
				width: '30',// 宠物头像大小
				height: '30',// 宠物头像大小
			}, {
				latitude: 39.90,// 宠物2 纬度
				longitude: 116.39,// 宠物2 经度
				iconPath: '/static/image/dog.png',// 宠物头像
				width: '30',// 宠物头像大小
				height: '30'// 宠物头像大小
			}],
			polyline: [],
			// 运行轨迹
			coordinate: [
				{ latitude: 39.909, longitude: 116.39742, problem: false }, // 起点
				{ latitude: 39.905, longitude: 116.39722, problem: false },
				{ latitude: 39.9007, longitude: 116.39922, problem: false },
				{ latitude: 39.9207, longitude: 116.39942, problem: false },
				{ latitude: 39.9227, longitude: 116.39342, problem: false },
				{ latitude: 39.90, longitude: 116.39, problem: false } // 终点
			],
			translateMarker: {
				markerId: 5,
				destination: {

				}

			},
			options1: [{
				label: 'cxk',
				value: 1,
			},


			],
		}
	},
	watch: {
		activeIndex: {
			handler(newVal, oldVal) {
				// console.log(newVal);
				if (newVal === 0) {
					uni.navigateTo({
						url: '/pages/MyPet/AddDevice'
					})
				}
				if (newVal === 1) {
					this.popAttr.show = true
					this.mapShow = false
				}
				if (newVal === 2) {
					uni.navigateTo({
						url: '/pages/FindPet/album'
					})
					// this.popAttr.show2 = true
					// this.mapShow = false
				}
				if (newVal === 3) {
					this.popAttr.show2 = true
					this.mapShow = false
				}
				// this.list[newVal].url = ''
			},
			// immediate: true
		}
	},
	onReady() {
		// 创建map对象
		this.map = uni.createMapContext('map');
	},
	methods: {
		trialFun() {
			this.popAttr.show = false
			this.mapShow = true
			uni.$to('/pages/FindPet/trial')
		},
		VlPFun() {
			this.popAttr.show = false
			this.mapShow = true
		},
		rangeFun() {
			this.popAttr.show2 = false
			this.mapShow = true
		},

	},
	mounted() {
		// 读取路径数据
		this.polyline = [{
			points: this.coordinate,
			color: '#025ADD',
			width: 4,
			dottedLine: false,
		}];
	},
}
</script>

<style lang="scss" scoped>
.cover-modal {
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40rpx;
	box-sizing: border-box;

	.cover-modal-slot {

		// border;
		width: 100%;
		height: 220px;
		background-color: #fff;
		border-radius: 10px;
		text-wrap: wrap;
		padding: 0 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		flex-direction: column;
		// line-break: loose;
		// text-indent: 1em;
		// white-space:;
	}
}

::v-deep .amap-logo {
	width: 0;
	height: 0;
	display: none !important;
	opacity: 0 !important;
}

::v-deep .amap-copyright {
	opacity: 0 !important;

}

.FindPet {


	// border: 1px solid red;
	height: 100vh;
	display: flex;
	flex-direction: column;

	.status_bar {
		background-color: transparent;
		height: var(--status-bar-height);
		width: 100%;
	}

	.FindPet-Map {
		// height: 30%
		width: 100%;
		flex: 1;
		// background-color: orange;
		overflow-y: hidden;
	}

	.FindPet-Setting {
		transition: all .3s;
		width: 100vw;
		// max-height: 40%;
		// background-co.lor: darkred;
		// border: 1px solid red;
		box-sizing: border-box;
		// margin-to30rpx;
		// padding: 40rpx;
		padding-bottom: 40rpx;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.FindPet-Setting-current {
			// border: 1px solid red;
			transition: all .3s;
			width: 100%;
			height: 40px;
			padding-left: 40rpx;

			.FindPet-Setting-current-location {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				text {
					font-size: 20rpx;
					margin-left: 10rpx;
					color: #9a9a9a;
				}
			}

			.FindPet-Setting-current-station {
				font-size: 22rpx;
				font-weight: 900;
			}
		}

		.FindPet-Setting-box {
			transition: all .3s;
			// margin-top: 20rpx;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			// padding-bottom: 20rpx;
			// border: 1px solid red;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
			// border-radius: 10%;
			width: 90%;
			margin: 0 auto;

			// height: 300rpx;
			// flex: 1;
			.FindPet-Setting-box-date {
				// margin-top: 20rpx;
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					font-weight: 500;

					&:nth-of-type(2) {
						color: #9a9a9a;
						font-size: 24rpx;
						font-weight: normal;
						margin: 0;

					}
				}

				image {
					margin-left: 10rpx;
					width: 35rpx;
					height: 35rpx;
					vertical-align: bottom;
				}

				::v-deep .u-dropdown__content {
					width: 100px;
				}

				::v-deep .u-dropdown__content__mask {
					width: 0;
				}
			}

			.FindPet-Setting-box-control {
				// display: ;
				// border: 1px solid red;
				display: flex;
				margin-top: 20rpx;
				// width: 20%;
				// justify-content: space-between;
				position: relative;

				.FindPet-Setting-box-control-arrow {
					position: absolute;
					width: 60rpx;
					height: 60rpx;
					right: -30rpx;
					// left: 0to;
					top: 50%;
					transform: translateY(-50%);
					// transform: rotate(-90deg);
				}

				.FindPet-Setting-box-control-item {
					// border: 1px solid red;
					width: 20%;
					height: 150rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					justify-content: space-around;
					color: #9a9a9a;
					font-weight: 900;
					font-size: 20rpx;
					border: 1px solid #9a9a9a;
					border-radius: 25rpx;
					padding: 20rpx 0;
					margin-left: 30rpx;

					text {
						white-space: nowrap;
						text-wrap: nowrap;
					}

					&:nth-of-type(1) {
						margin-left: 0;
					}

					// padding: 20rpx;

					image {
						width: 70rpx;
						height: 70rpx;
					}

				}

				.active {
					background: $uni-bg-linear;
					color: #fff;
					border: none;
				}
			}
		}
	}


}

::v-deep .u-dropdown__content {
	padding: 20rpx;
	padding-left: 0;
	padding-top: 0;
}

::v-deep .u-dropdown__content__popup {
	border-radius: 12rpx !important;
	border: 1px solid #ccc;
	box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);
}

::v-deep .u-dropdown__menu__item__text {
	color: black !important;
	font-weight: 600;
}
</style>